import {useSearchParams} from 'react-router-dom'
// 导入useSelector获取数据 useDispatch创建动作发送器
import {useSelector,useDispatch} from 'react-redux'
// 导入action动作
import {increment,decrement,addVal,addSync} from '../store/counterSlice'

function UserView() {
  const [search] = useSearchParams();
  // 获取conter数据
  const value = useSelector(state=>state.counter.value)
  // 定义action发送器
  const dispatch = useDispatch();
  const user = search.get("id");
  return ( <div>
    <h3>用户</h3>
    <p>哪个用户:{user}</p>
    <button onClick={()=>dispatch(decrement())}>-</button>
    <span>{value}</span>
    <button onClick={()=>dispatch(increment())}>+</button> <br />
    <button onClick={()=>dispatch(addVal(8))}>+8</button>
    <button onClick={()=>dispatch(addVal(50))}>+50</button>
    <button onClick={()=>dispatch(addSync(10))}>等5秒加10</button>
  </div> );
}

export default UserView;